<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px">
          <div class="title">
            时间搜索
          </div>
            <el-form-item label="下单">
              <el-date-picker
                  v-model="orderRange"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  align="right">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="支付">
              <el-date-picker
                  v-model="payRange"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  align="right">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="加微">
              <el-date-picker
                  v-model="dateRange"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  align="right">
              </el-date-picker>
          </el-form-item>
          <br>
          <div class="title">
            状态搜索
          </div>
          <el-form-item label="支付状态" prop="pay_state">
              <el-select v-model="queryParams.pay_state" placeholder="支付状态" clearable style="width: 160px">
                  <el-option label="全部" value="" />
                  <el-option label="未支付" value="0" />
                  <el-option label="已支付" value="1" />
              </el-select>
          </el-form-item>
          <el-form-item label="加微状态" prop="is_wechat">
              <el-select v-model="queryParams.is_wechat" placeholder="加微状态" clearable style="width: 160px">
                  <el-option label="未加微" value="0" />
                  <el-option label="已加微" value="1" />
              </el-select>
          </el-form-item>

          <el-form-item label="重复用户" prop="is_repeat">
              <el-select v-model="queryParams.is_repeat" placeholder="请选择" clearable style="width: 160px">
                  <el-option label="全部" value="" />
                  <el-option label="否" value="0" />
                  <el-option label="是" value="1" />
              </el-select>
          </el-form-item>
          <el-form-item label="加微回传媒体" prop="post_back_ids">
              <el-select v-model="queryParams.post_back_ids" placeholder="请选择" multiple clearable collapse-tags>
                  <el-option v-for="item in mediaList" :key="item.id" :label="item.title" :value="item.id" />
              </el-select>
          </el-form-item>
          <el-form-item label="是否有表单" prop="is_form">
              <el-select v-model="queryParams.is_form" placeholder="请选择" clearable style="width: 160px">
                  <el-option label="全部" value="" />
                  <el-option label="否" value="0" />
                  <el-option label="是" value="1" />
              </el-select>
          </el-form-item>
          <el-form-item label="是否有问卷" prop="is_question">
              <el-select v-model="queryParams.is_question" placeholder="请选择" clearable style="width: 160px">
                  <el-option label="全部" value="" />
                  <el-option label="否" value="0" />
                  <el-option label="是" value="1" />
              </el-select>
          </el-form-item>
          <br>
          <div class="title">
            落地页参数
          </div>
          <el-form-item label="接量方案" prop="type_id">
              <!-- <el-select v-model="queryParams.type_id" placeholder="路径名称" clearable style="width: 160px">
                  <el-option v-for="item in chneTypeList" :key="item.id" :label="item.title" :value="item.id" />
              </el-select> -->
              <el-select v-model="queryParams.type_id" placeholder="接量方案" clearable style="width: 160px">
                  <el-option label="基木鱼" value="0" />
                  <el-option label="非基木鱼" value="1" />
              </el-select>
          </el-form-item>
          <!-- <el-form-item label="接量方案" prop="project_id">
              <el-select v-model="queryParams.project_id" placeholder="接量方案" clearable style="width: 160px">
                <el-option v-for="item in projList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
          </el-form-item> -->
          <el-form-item label="渠道名称" prop="channel_id">
              <!-- <el-select v-model="queryParams.channel_id" placeholder="渠道名称" clearable style="width: 160px">
                  <el-option v-for="item in channelList" :key="item.id" :label="item.title" :value="item.id" />
              </el-select> -->
              <el-cascader
                    v-model="queryParams.channel_id"
                    clearable
                    :options="channelListNew"
                     placeholder="渠道名称"
                    :props="{ expandTrigger: 'hover' , label:'title',value:'id' }"
                >
                </el-cascader>
          </el-form-item>
          <el-form-item label="站点名称" prop="product_id">
              <el-select v-model="queryParams.product_id" placeholder="站点名称" multiple filterable clearable collapse-tags style="max-width: 400px;" >
                  <el-option label="全部" value="" />
                  <el-option v-for="item in productList" :key="item.product_id" :label="item.product_name" :value="item.product_id" />
              </el-select>
          </el-form-item>
          <el-form-item label="价格" prop="pay_amount">
              <el-select v-model="queryParams.pay_amount" placeholder="价格" clearable style="width: 160px">
                  <el-option label="全部" value="" />
                  <el-option v-for="item in priceList" :key="item" :label="item" :value="item" />
              </el-select>
          </el-form-item>
          <el-form-item label="cctid" prop="cctid">
              <el-input v-model="queryParams.cctid" placeholder="请输入cctid" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="strid" prop="strid">
              <el-input v-model="queryParams.strid" placeholder="请输入strid" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="bepid" prop="bepid">
              <el-input v-model="queryParams.bepid" placeholder="请输入bepid" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="账户ID(监测)" prop="put_id">
              <el-input v-model="queryParams.put_id" placeholder="请输入账户ID" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <br>
          <div class="title">
            用户信息
          </div>
          <el-form-item label="手机号" prop="phone">
              <el-input v-model="queryParams.phone" placeholder="请输入" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="社群老师" prop="user_ids">
              <el-select v-model="queryParams.user_ids" placeholder="请选择社群老师" multiple filterable clearable collapse-tags>
                  <el-option v-for="item in teacherList" :key="item.wx_user_id" :label="item.name" :value="item.wx_user_id" />
              </el-select>
          </el-form-item>
          <el-form-item label="用户昵称" prop="real_name">
              <el-input v-model="queryParams.real_name" placeholder="请输入" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <!-- <el-form-item label="媒体ID" prop="click_id">
              <el-input v-model="queryParams.click_id" placeholder="请输入" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
          </el-form-item> -->
          <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <br>
      <el-row type="flex" class="row-bg mb8" justify="space-between" :gutter="10">
            <el-col :span="1.5" class="static">
              <span>数据统计：</span>
              <span>下单量<b>{{statistics.order_count}}</b></span>
              <span>支付量<b>{{statistics.pay_count}}</b></span>
              <span>支付率<b>{{statistics.pay_success_percent}}%</b></span>
              <span>加v量<b>{{statistics.add_wechat_count}}</b></span>
              <span>加v率<b>{{statistics.add_wechat_percent}}%</b></span>
              <span>重复比率<b>{{statistics.add_repeat_wechat_percent}}%</b></span>
            </el-col>
          <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-col>
      </el-row>
      
      <el-table v-loading="loading" :data="orderList">
          <el-table-column type="index" :index="(queryParams.page - 1) * queryParams.pageSize + 1" width="50" fixed="left" />
          <el-table-column label="路径" align="center" prop="type_id" >
              <template slot-scope="scope">{{ scope.row.type_id == '1' ? '非基木鱼':  '基木鱼'}}</template>
          </el-table-column>
          <el-table-column label="社群老师" align="center" prop="name" width="180" :show-overflow-tooltip="true" />
          <el-table-column label="加微状态" align="center" prop="is_wechat" width="120">
              <template slot-scope="scope">
                  <el-tag v-if="scope.row.is_wechat == '1'">已加微</el-tag>
                  <el-tag type="danger" v-else>未加微</el-tag>
              </template>
          </el-table-column>
          <el-table-column label="支付状态" align="center" prop="pay_state" >
              <template slot-scope="scope">{{ scope.row.pay_state == '1' ? '已支付':  '未支付'}}</template>
          </el-table-column>
          <el-table-column label="价格" align="center" prop="pay_amount" />
          <el-table-column label="cctid" align="center" prop="cctid" width="100" :show-overflow-tooltip="true" />
          <el-table-column label="strid" align="center" prop="strid" width="100" :show-overflow-tooltip="true" />
          <el-table-column label="bepid" align="center" prop="bepid" width="100" :show-overflow-tooltip="true" />
          <el-table-column label="渠道名称" align="center" prop="channel_title" width="150" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                  <span>{{scope.row.level2_channel_title+'/'+ scope.row.level3_channel_title}}</span>
              </template>
          </el-table-column>
          <el-table-column label="渠道ID" align="center" prop="channel_id" width="100" :show-overflow-tooltip="true" />
          <el-table-column label="站点名称" align="center" prop="product_name" width="150" :show-overflow-tooltip="true" />
          <el-table-column label="站点ID" align="center" prop="product_id" />
          <el-table-column label="是否表单" align="center" prop="is_form">
            <template slot-scope="scope">
                  <span>{{scope.row.is_form==0?'否':'是'}}</span>
              </template>
        </el-table-column>
          <el-table-column label="是否问卷" align="center" prop="is_question" >
            <template slot-scope="scope">
                  <span>{{scope.row.is_question==0?'否':'是'}}</span>
              </template>
        </el-table-column>
          <el-table-column label="用户昵称" align="center" prop="real_name" width="150" :show-overflow-tooltip="true" />
          <el-table-column label="手机号" align="center" prop="external_phone" width="150" />
          <el-table-column label="重复用户" align="center" prop="is_repeat_title" width="150" />
          <el-table-column label="加微回传媒体" align="center" prop="is_back_title" width="150" >
              <template slot="header">
                  <el-tooltip content="加微不回传媒体目前有四种情况：1、投放侧没有设置加微回传 2、站点ID对应设置了重复用户加微不回传 3、用户支付后超过5min加微不回传 4、自然流量无媒体唯一ID" effect="dark" placement="bottom">
                      <span>加微回传媒体<i class="el-icon-question"></i></span>
                  </el-tooltip>
              </template>
              <template slot-scope="scope">
                  <span>{{scope.row.is_back_title}}</span>
              </template>
          </el-table-column>
          <el-table-column label="加微时间" align="center" prop="wechat_time" width="160" />
          <el-table-column label="支付时间" align="center" prop="pay_time" width="160" />
          <el-table-column label="下单时间" align="center" prop="create_time" width="160" >
              <template slot="header">
                  <el-tooltip content="【基木鱼】对应爱番番后台，线索时间；【非基木鱼】有表单为表单提交时间，无表单为提交问卷或报名时间" effect="dark" placement="bottom">
                      <span>下单时间<i class="el-icon-question"></i></span>
                  </el-tooltip>
              </template>
              <template slot-scope="scope">
                  <span>{{scope.row.create_time}}</span>
              </template>
          </el-table-column>
          <el-table-column label="订单编号" align="center" prop="code" width="180" />
          <el-table-column label="媒体ID" align="center" prop="click_id" width="240" :show-overflow-tooltip="true" />
          <el-table-column label="账户ID(监测)" align="center" prop="put_id" width="95" />
      </el-table>

      <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
      />
</div>
</template>

<script>
import { getTypeOpt, getPriceList, getOperaList, getOptionList, getMediaList, listOrder,getOptionListCs } from "@/api/order";
import { getTeacher, getProject} from "@/api/teacher";


export default {
data() {
  return {
      loading: true,	// 遮罩层
      showSearch: true,// 显示搜索条件
      chneTypeList:[],
      channelListNew:[],
      channelList:[],//下拉渠道
      productList:[],//下拉产品
      priceList:[],//下拉价格
      teacherList:[],//社群老师
      mediaList:[],
      queryParams: { 	// 查询参数
          page: 1,
          pageSize: 20,
          name: undefined,
          phone: undefined,
          is_wechat: '',
      },
      orderRange: [], //订单时间范围
      dateRange: [],	// 加微时间范围 
      payRange: [], //支付时间范围
      orderList:[],
      projList:[],
      total:0,
      statistics:{}//统计数据
  };
},
    created() {
    
      let date = new Date().toLocaleDateString().split('/').join('-')
      const startDate = this.$route.query.startDate ||  date
      const endDate = this.$route.query.endDate ||  date
      let params = JSON.parse(JSON.stringify(this.$route.query))
      params.user_ids = params.user ? [params.user] : []
      if(this.$route.query.pay_state){
          this.payRange = [startDate + " 00:00:00",endDate + " 23:59:59"]
          const obj = {
              pay_start_time: startDate + " 00:00:00",
              pay_end_time: endDate + " 23:59:59"
          }
          this.queryParams = {...this.queryParams,...params,...obj}
          this.queryParams.type_id= this.queryParams.type_id==0?"1":"0"
      }
      if(params.is_wechat){
          this.dateRange = [startDate + " 00:00:00",endDate + " 23:59:59"]
          const obj = {
              add_wechat_start_time: startDate + " 00:00:00",
              add_wechat_end_time: endDate + " 23:59:59"
          }
          this.queryParams = {...this.queryParams,...params,...obj}
          this.queryParams.type_id= this.queryParams.type_id==0?"1":"0"
      }
      this.getTypeOpt()
      this.getOptionListCs()
      this.getOptionList()
      this.getOperaList()
      this.getPriceList()
      this.getTeacherList()
      this.getMediaList()
      this.getProject()
      this.getList()
    },
   methods: {
    getOptionListCs(){
        getOptionListCs().then(res=>{
            this.channelListNew=res.data
        })
      },
    getProject(){
        getProject().then(res=>{
            this.projList=res.data
        })
    },
      /** 下拉路径 */
      getTypeOpt(){
          getTypeOpt().then(res => {
              this.chneTypeList  = res.data
          });
      },
      /** 下拉渠道 */
      getOptionList(){
          getOptionList().then(res => {
              this.channelList  = res.data
          });
      },
      /** 下拉站点 */
      getOperaList(){
          getOperaList().then(res => {
              this.productList = res.data
          });
      },
      /** 下拉价格 */
      getPriceList(){
          getPriceList().then(res => {
              this.priceList = res.data
          });
      },
      /** 下拉社群老师 */
      getTeacherList(){
          getTeacher().then(res => {
              this.teacherList = res.data
          });
      },
      /** 下拉媒体 */
      getMediaList(){
          getMediaList().then(res => {
              this.mediaList = res.data
          });
      },
      getList() {
          this.loading = true;

          //下单时间处理
          this.orderRange = Array.isArray(this.orderRange) ? this.orderRange : [];
          this.queryParams.order_start_time = this.orderRange[0];
          this.queryParams.order_end_time = this.orderRange[1];

          //加微时间处理
          this.dateRange = Array.isArray(this.dateRange) ? this.dateRange : [];
          this.queryParams.add_wechat_start_time = this.dateRange[0];
          this.queryParams.add_wechat_end_time = this.dateRange[1];

          //支付时间处理
          this.payRange = Array.isArray(this.payRange) ? this.payRange : [];
          this.queryParams.pay_start_time = this.payRange[0];
          this.queryParams.pay_end_time = this.payRange[1];

          listOrder({...this.queryParams,channel_id:this.queryParams.channel_id?this.queryParams.channel_id[1]:''}).then(res => {
              this.orderList = res.data.data
              this.statistics = res.data.statistics
              this.total = res.data.total;
              this.loading = false;
          });
      },
      /** 搜索按钮操作 */
      handleQuery() {
          this.queryParams.page = 1;
          this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
          this.queryParams = {
              page: 1,
              pageSize: 20,
          },
          this.dateRange = []
          this.payRange = []
          this.orderRange = []
          this.handleQuery();
      },
      /** 导出按钮操作 */
      handleExport() {
         let exportObj=JSON.parse(JSON.stringify(this.queryParams))
         exportObj.channel_id=exportObj.channel_id?exportObj.channel_id[1]:''
          this.download('order/exportExcel', 
            exportObj
          , `user_${new Date().getTime()}.xlsx`)
      },
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-select .el-tag{
    max-width: 75%;
}
::v-deep .el-select__tags{
    flex-wrap: nowrap;
}
.app-container .title{
    width: 100%;
    font-size: 16px;
    font-weight: 1000;
    padding-right: 12px;
    text-align: left;
    margin-bottom: 12px;
    color:#2d2d2e ;
}
  .row-bg{background: #ecf5ff;padding: 10px;}
  .row-bg .static span{display: inline-block;font-size: 14px;padding-left: 5px;line-height: 26px;}
  .row-bg .static span:first-child{padding-left: 15px;}
  .row-bg .static b{font-size: 16px;color: #409eff;padding-left: 5px;padding-right: 20px;}
  .row-bg .el-button{margin-right: 10px;}
</style>
